import type { RuleOptionType } from '../formConfig/setRule/index'
import {
  ElCheckbox,
  ElCheckboxGroup,
  ElDatePicker,
  ElInput,
  ElRadio,
  ElRadioGroup,
  ElSelect,
  ElSlider,
  ElSwitch,
} from 'element-plus'

import JhfUpload from '../components/JhfUpload/index.vue'

// 需要显示options的组件
export const componentWithOptions = ['select', 'radioGroup', 'checkboxGroup']

// 组件名映射
export const componentMap = {
  input: ElInput,
  select: ElSelect,
  checkbox: ElCheckbox,
  checkboxGroup: ElCheckboxGroup,
  radio: ElRadio,
  radioGroup: ElRadioGroup,
  date: ElDatePicker,
  slider: ElSlider,
  switch: ElSwitch,
  upload: JhfUpload,
}
export interface FormBasicConfig {
  totalColumns: number
  gridGap: number
  description: string
}

// 获取组件
export function getComponent(type: string) {
  return componentMap[type as keyof typeof componentMap] || ElInput
}

// 组件选项
export interface ComponentOptions {
  id: number | string
  span: number
  defaultValue?: string
  component: string
  field?: string
  isHidden?: boolean
  selectOptions?: {
    label: string
    value: string
  }[]
  label?: string
  labelWidth?: string | number
  rules?: RuleOptionType[]
  event?: {
    name: string
    des: string
    code: string
  }[] & any
  attrs?: any
}
export interface componentType {
  name: string
  icon: string
  options: ComponentOptions
}
// 基础组件
export const baseComponentList: componentType[] = [
  {
    name: '输入框',
    icon: 'Edit',
    options: {
      id: 1,
      span: 12,
      component: 'input',
      field: 'name',
      label: '输入框',
      defaultValue: '',
      labelWidth: 100,
      event: [
        {
          name: 'input',
          des: '输入框值改变时触发',
          code: '(val) => { console.log(val)}',
        },
        {
          name: 'change',
          des: '输入框值改变时触发',
          code: '(val) => { console.log(val)}',
        },
        {
          name: 'focus',
          des: '输入框获得焦点时触发',
          code: '(val) => { console.log(val)}',
        },
        {
          name: 'clear',
          des: '输入框清空时触发',
          code: '(val) => { console.log(val)}',
        },
      ],
      rules: [
        {
          label: '必填',
          value: 'required',
          required: true,
          message: '请输入',
        },
      ],
      attrs: {
        placeholder: '请输入',
        showWordLimit: true,
        disabled: true,
        maxLength: 10,
        clearable: true,
      },
    },
  },
  {
    name: '选择器',
    icon: 'Select',
    options: {
      id: 2,
      span: 12,
      component: 'select',
      field: 'age',
      label: '选择器',
      defaultValue: '',
      rules: [],
      labelWidth: 100,
      event: [
        {
          name: 'change',
          des: '选择器值改变时触发',
          code: '(val) => { console.log(val)}',
        },
      ],

      selectOptions: [
        {
          label: '选项11',
          value: '1',
        },
        {
          label: '选项2',
          value: '2',
        },
      ],
      attrs: {
        placeholder: '请选择',
      },
    },
  },
  {
    name: '复选框',
    icon: 'Brush',
    options: {
      id: 3,
      span: 12,
      component: 'checkbox',
      field: 'gender',
      label: '复选框',
      defaultValue: '',
      rules: [],
      labelWidth: 100,
      attrs: {
        placeholder: '请选择',
      },
    },
  },
  {
    name: '复选框组',
    icon: 'MilkTea',
    options: {
      id: 3,
      span: 12,
      component: 'checkboxGroup',
      field: 'gender',
      label: '复选框',
      defaultValue: '',
      labelWidth: 100,
      rules: [],
      attrs: {
        placeholder: '请选择',
      },
      event: [
        {
          name: 'change',
          des: '复选框组值改变时触发',
          code: '(val) => { console.log(val)}',
        },
      ],
      selectOptions: [
        {
          label: '选项1',
          value: '1',
        },
        {
          label: '选项2',
          value: '2',
        },
      ],
    },
  },
  {
    name: '单选框',
    icon: 'Mug',
    options: {
      id: 4,
      span: 12,
      component: 'radio',
      field: 'gender',
      label: '单选框',
      defaultValue: '1',
      rules: [],
      labelWidth: 100,
      attrs: {
        placeholder: '请选择',
      },
    },
  },
  {
    name: '单选框组',
    icon: 'Reading',
    options: {
      id: 4,
      span: 12,
      component: 'radioGroup',
      selectOptions: [
        {
          label: '选项1',
          value: '1',
        },
        {
          label: '选项2',
          value: '2',
        },
      ],
      field: 'gender',
      label: '单选框',
      defaultValue: '1',
      labelWidth: 100,
      attrs: {
        placeholder: '请选择',
      },
    },
  },
  {
    name: '日期选择器',
    icon: 'SetUp',
    options: {
      id: 5,
      span: 12,
      component: 'date',
      field: 'date',
      label: '日期选择器',
      defaultValue: '',
      labelWidth: 100,
      event: [
        {
          name: 'change',
          des: '日期选择器值改变时触发',
          code: '(val) => { console.log(val)}',
        },
      ],
      attrs: {
        placeholder: '请选择',
      },
    },
  },
  {
    name: '滑动选择器',
    icon: 'Collection',
    options: {
      id: 6,
      span: 12,
      component: 'slider',
      field: 'slider',
      label: '滑动选择器',
      defaultValue: '',
      labelWidth: 100,
      attrs: {
        placeholder: '请选择',
      },
    },
  },
  {
    name: '开关',
    icon: 'Switch',
    options: {
      id: 7,
      span: 12,
      component: 'switch',
      field: 'switch',
      label: '开关',
      defaultValue: '',
      labelWidth: 100,
      attrs: {
        placeholder: '请选择',
      },
      event: [
        {
          name: 'change',
          des: 'switch 状态发生变化时的回调函数',
          code: '(val) => { console.log(val)}',
        },
      ],
    },
  },
  {
    name: '图片上传',
    icon: 'Upload',
    options: {
      id: 8,
      span: 12,
      component: 'upload',
      field: 'upload',
      label: '上传',
      defaultValue: '',
      labelWidth: 100,
      attrs: {
        placeholder: '请选择',
      },
    },
  },
].map((item) => {
  return {
    ...item,
    options: {
      ...item.options,
      attrs: JSON.stringify(item.options.attrs),
    },
  }
})

// 业务组件
export const businessComponentList: componentType[] = [
  {
    name: '部门选择',
    icon: 'FolderChecked',
    options: {
      id: 6,
      span: 12,
      component: 'department',
      field: 'department',
      label: '部门选择',
      defaultValue: '',
      labelWidth: 100,
      attrs: {
        placeholder: '请选择',
      },
    },
  },
  {
    name: '岗位选择',
    icon: 'Notebook',
    options: {
      id: 7,
      span: 12,
      component: 'post',
      field: 'post',
      label: '岗位选择',
      defaultValue: '',
      labelWidth: 100,
      attrs: {
        placeholder: '请选择',
      },
    },
  },
]
